<template>

  <!--    <div>-->
  <!--      <el-button>测试</el-button>-->
  <!--    </div>-->
  <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'chartPie',
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      charts: null
    }
  },
  computed: {},
  methods: {
    resizeCharts () {
      this.charts.resize()
    },
    initCharts () {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.barChart)
        this.charts.clear()
        this.charts.showLoading()
        if (this.data.length > 0) {
          this.setOption()
        }
      })
    },
    setOption () {
      const option = this.getOption()
      this.charts.hideLoading()
      this.charts.setOption(option, true)
    },
    getOption () {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '10',
          top: '150'
        },
        // color: ['#99CCFF', '#0099CC', '#3366CC', '#006699',
        //   '#336699', '#666699', '#333333', '#666666'],
        color: ['#FFC8B4', '#FFDDAA', '#FFEE99', '#FFFFBB', '#EEFFBB', '#CCFF99', '#99FF99', '#BBFFEE',
          '#AAFFEE', '#99FFFF', '#CCEEFF', '#CCDDFF', '#CCCCFF', '#CCBBFF', '#D1BBFF', '#E8CCFF',
          '#F0BBFF', '#FFB3FF', '#FFFF77', '#DDFF77', '#BBFF66', '#77FFCC', '#77FFEE', '#66FFFF',
          '#77DDFF', '#99BBFF', '#9999FF', '#9F88FF', '#B088FF', '#D28EFF', '#E38EFF', '#FF77FF',
          '#33FFAA', '#33FFDD', '#33FFFF', '#33CCFF', '#00FF99', '#00FFCC', '#00FFFF', '#00BBFF',
          '#00DDAA', '#00DDDD', '#009FCC'],
        series: [{
          name: '关键词',
          type: 'pie',
          radius: '70%', // 圆环的大小
          center: ['50%', '50%'], // 圆环的位置
          data: this.data,
          emphasis: {
            focus: 'data',
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
          // ,
          // label: { // 去除饼图的指示折线label
          //   normal: {
          //     show: false
          //   }
          // }
        }]
      }
      return option
    }
  },
  mounted () {
    this.initCharts()
  },
  beforeDestroy () {
    this.charts && this.charts.dispose()
    this.charts = null
  },
  watch: {
    data: {
      handler () {
        this.setOption()
      }
    }
  },
  components: {}
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
